<template>
  <div class="divisional">
    <div class="search_box" style="width: 96%;">
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="inpText">员工号:</span>
          <el-input v-model.trim="params.collectorId" size="small" placeholder="请输入内容" style="width: auto;"></el-input>
        </el-col>
        <el-col :span="6">
          <span class="inpText">员工姓名:</span>
          <el-input v-model.trim="params.collectorName" size="small" placeholder="请输入内容" style="width: auto;"></el-input>
        </el-col>

        <el-col :span="6">
          <span class="inpText">统计维度:</span>
          <el-select v-model="params.status" placeholder="请选择" @change="selectTJWD" size="small">
            <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
          <span class="inpText">日期选择:</span>
          <el-date-picker v-model="dateValue" :picker-options="datePickerOptions" :type="dateType" :value-format="dateFormat"
            size="small"></el-date-picker>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="text-align:center;">
        <el-button size="small" type="primary" @click="checkInfo">统计</el-button>
        <el-button size="small" type="primary" @click="reset">重置</el-button>
      </el-row>
    </div>

    <!-- 列表-->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table v-loading="loading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)" :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="460" style="width: 100%">
          <el-table-column prop="collectorId" label="工号" width></el-table-column>
          <el-table-column prop="collectorName" label="姓名" width></el-table-column>
          <el-table-column prop="numberOfCasesHandled" label="处理案件量" :formatter="filterNull"></el-table-column>
          <el-table-column prop="amountOverdue" label="逾期金额" :formatter="filterNull"></el-table-column>
          <el-table-column prop="amountRecovered" label="回款金额" :formatter="filterNull"></el-table-column>
          <!-- <el-table-column prop="rateRecovered" label="回款率" :formatter="concatPercent"></el-table-column> -->

          <el-table-column prop="rateRecovered" label="回款率" :formatter="concatPercent">
            <template slot="header" slot-scope="scope">
              <span>回款率</span>
              <el-tooltip class="item" effect="dark" content="回款金额/逾期金额" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
          </el-table-column>


          <!-- <el-table-column prop="date" label="日期"></el-table-column> -->
        </el-table>
      </el-col>
    </el-row>
    <!-- <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div> -->
  </div>
</template>
<script>
  import {
    Message
  } from "element-ui";
  import {
    cmcUrl
  } from "../../../../static/baseUrl";
  export default {
    data() {
      return {
        loading: false,
        datePickerOptions: {
          disabledDate(date) {
            return date > new Date().setDate(new Date().getDate() - 1)
          }
        },
        dateType: "date",
        dateFormat: "yyyy-MM-dd",

        radio: "",
        currentPage: 1,
        total: 0,
        pageSize: 10,
        params: {
          status: "1",
          collectorId: "",
          collectorName: "",
        },
        options: [{
            value: "1",
            label: "日期",
          },
          {
            value: "2",
            label: "月度",
          },
          {
            value: "3",
            label: "年度",
          },
        ],
        tableData: [],
        items: [{
            value: "0",
            label: "全部",
          },
          {
            value: "1",
            label: "短信",
          },
          {
            value: "2",
            label: "智能",
          },
          {
            value: "3",
            label: "人工客服",
          },
        ],
        count: 0,
        dateValue: "",
        defaultStr: "-",
      };
    },
    created() {
      this.initDate();
      this.checkInfo();
    },
    methods: {
      filterNull(row, column, cellValue, index) {
        if (cellValue == "0") {
          return cellValue;
        } else if (cellValue == undefined || cellValue == null || cellValue == "") {
          return this.defaultStr;
        } else {
          return cellValue;
        }
      },
      concatPercent(rowData) {
        let str = "";
        if (rowData.hasOwnProperty("rateRecovered")) {
          let temp = rowData.rateRecovered;
          if (temp != undefined && temp != null && temp != "") {
            str = temp + '%';
          }
        }
        if (str == "") {
          str = "-";
        }
        return str;
      },
      initDate() {
        this.dateType = "date";
        this.dateFormat = "yyyy-MM-dd";
        //获取当前时间的前一天
        this.dateValue = this.$moment(new Date().setDate(new Date().getDate() - 1)).format("YYYY-MM-DD");

      },
      selectTJWD() {
        if (this.params.status == '1') {
          this.dateType = "date";
          this.dateFormat = "yyyy-MM-dd";
          this.dateValue = this.$moment(this.dateValue).format("YYYY-MM-DD");
        } else if (this.params.status == '2') {

          this.dateType = "month";
          this.dateFormat = "yyyy-MM";
          this.dateValue = this.$moment(this.dateValue).format("YYYY-MM");
        } else if (this.params.status == '3') {

          this.dateType = "year";
          this.dateFormat = "yyyy";
          this.dateValue = this.$moment(this.dateValue).format("YYYY");
        }
      },

      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },


      reset() {
        this.params = {
            status: "1",
            collectorId: "",
            collectorName: "",
          },

          this.initDate();
      },

      checkInfo() {
        this.loading = true;
        console.log("this.params;;", this.params);
        this.$axios({
            method: "get",
            url: `/CMC/achievement/select?collectorId=` + this.params.collectorId + '&collectorName=' + this.params
              .collectorName + "&dataTime=" + this.dateValue,
          })
          .then((res) => {
            console.log(res, "查询数据");
            this.loading = false;
            if (res.code == 200) {
              this.tableData = res.data;
            } else {
              this.tableData = [];
              console.error(res.message);
            }
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 50px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        /*        height: inherit;
 */
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          /* padding-left: 30px;
          padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 70vh;  分页的*/
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
    }

    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }

  @import "../../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 1.2%;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }
</style>
